<template>
	<view class="box">
		<view class="count">我的数字藏品 <text class="n">{{total ? total : 0}}</text></view>
		<u-empty v-if="total == 0 " mode="data" marginTop="60" icon="http://cdn.uviewui.com/uview/empty/data.png">
		</u-empty>
		<u-grid :border="false" col="2">
			<u-grid-item :customStyle="{width: '50%'}" class="grid-item" v-for="(item, index) in list" :key="index">
				<view class="col" @click="clickCollection(item)">
					<view class="cover">
						<view class="status">{{CollectionStatus[item.status]}}</view>
						<u--image radius="5" width="100%" height="350rpx" mode="aspectFill" :src="item.cover">
						</u--image>
					</view>
					<view class="name">{{item.name}}</view>
					<view class="artist textHide">艺术家: {{item.artistName}}</view>
					<view class="price">
						<text class="l">数量: x1</text>
						<u-icon @click="show = true; cur = item" :name="visibleIcon[item.visible]" color="#999999">
						</u-icon>
					</view>
				</view>
			</u-grid-item>
		</u-grid>
		<u-action-sheet @close="show = false" :show="show" :safeAreaInsetBottom="true">
			<view class="sheet">
				<view @click="onClickVisible(k)" class="cell" v-for="(v, k) in commodityVisible" :key="k">{{v}}</view>
				<u-gap height="6" bgColor="#0a0a22"></u-gap>
				<view class="cell" @click="show = false">取消</view>
			</view>
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		commodityVisible,
		CollectionStatus
	} from '@/common/config/enums.js'
	export default {
		components: {},
		props: {
			list: {
				type: Array,
				default: []
			},
			total: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				visibleIcon: {
					0: 'lock-fill',
					1: 'eye-fill',
					2: 'lock-opened-fill'
				},
				commodityVisible,
				CollectionStatus,
				show: false,
				cur: null
			}
		},
		onLoad() {

		},
		methods: {
			...mapActions('commodity', ['updateCommodityVisible']),
			clickCollection(item) {
				if (item.status == 0) {
					this.navTo('/pages/mine/consignment', {
						commodityId: item.id
					})
				}
			},
			onClickVisible(type) {
				let form = {
					id: this.cur.id,
					type: type
				}
				this.updateCommodityVisible(form).then(res => {
					this.cur.visible = type
					this.show = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 20rpx 10rpx;
		background-color: #0a0a22;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		.count {
			padding: 20rpx 10rpx 30rpx 10rpx;
			color: #cdcdcd;
			font-size: 25rpx;

			.n {
				color: #ffffff;
				font-size: 30rpx;
				padding-left: 20rpx;
			}
		}

		.grid-item {
			background-color: red;
		}

		.col {
			background-color: #484b5e;
			border-radius: 10rpx;
			width: 96%;
			margin-bottom: 20rpx;

			.cover {
				position: relative;

				.status {
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					font-size: 24rpx;
					background-color: #0a0a22;
					padding: 6rpx 20rpx;
					border-radius: 6rpx;
					z-index: 999;
				}
			}

			.name {
				color: #ffffff;
				font-size: 26rpx;
				padding: 10rpx 10rpx;
			}

			.artist {
				color: #999999;
				font-size: 22rpx;
				padding: 0rpx 10rpx;

			}

			.price {
				display: flex;
				justify-content: space-between;
				font-size: 22rpx;
				padding: 20rpx 10rpx 30rpx 10rpx;

				.r {
					color: #fac22b;
				}
			}
		}
	}

	.sheet {
		background-color: #0a0a22;
		padding: 0;
		margin: 0;

		.cell {
			background-color: #232639;
			height: 80rpx;
			line-height: 80rpx;
			border: 1rpx solid #0a0a22;
		}

		.u-gap {
			background-color: #0a0a22;
		}
	}
</style>
